<template>
	<div class="order-delivery-container">
		<el-card class="breadcrumb-card card-form" :style="{height:formHeight+'px'}">
			<!-- 路径导航 -->
			<div slot="header" class="breadcrumb-header">
				<el-page-header @back="$router.back()" title="售后列表" :content="'单号：'+applyInfo.returnSn"/>
			</div>
			<el-scrollbar>
				<!-- 申请商品 -->
				<el-card class="breadcrumb-card">
					<div slot="header" class="breadcrumb-header fs-14"><span><i class="el-icon-position"/>申请商品</span></div>
					<el-table size="small" :data="applyInfo.returnApplyItemList" style="width: 100%">
						<el-table-column prop="goodsName" label="商品名称"/>
						<el-table-column prop="goodsPic" align="center" label="图片" width="120">
							<template slot-scope="scope">
								<el-avatar shape="square" :size="40" :src="scope.row.goodsPic"/>
							</template>
						</el-table-column>
						<el-table-column prop="goodsPrice" align="center" label="价格" width="120">
							<template slot-scope="scope">
								<span class="money">{{scope.row.goodsPrice | fentoyuan}}</span>
							</template>
						</el-table-column>	
						<el-table-column prop="goodsNum" align="center" label="数量" width="120"/>
					</el-table>
				</el-card>
				<!-- 申请信息 -->
				<el-card class="breadcrumb-card">
					<div slot="header" class="breadcrumb-header fs-14"><span><i class="el-icon-position"/>申请信息</span></div>
					<el-table size="small" :data="applyInfoList" style="width: 100%">
						<el-table-column prop="showReturnType" align="center" label="申请类型" width="80"/>
						<el-table-column prop="returnAmount" align="center" label="退款金额" width="180">
							<template slot-scope="scope">
								<span class="money">{{scope.row.returnAmount | fentoyuan}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="goodsPic" align="center" label="图片" width="180">
							<template slot-scope="scope">
								<el-avatar shape="square" :size="40" :src="scope.row.applyPic"/>
							</template>
						</el-table-column>
						<el-table-column prop="applyReason" label="申请原因"/>
						<el-table-column prop="showReturnStatus" align="center" label="申请状态" width="80"/>
						<el-table-column prop="applyTime" align="center" label="申请时间" width="180"/>
					</el-table>
				</el-card>
				<div class="el-scrollbar-end"></div>
			</el-scrollbar>
		</el-card>	
	</div>
</template>

<script>
import mallOrderApi from '@/api/mallOrderApi'	
	
export default {
	name: 'orderReturnVerify',
	data () {
		return {
			formHeight: 0,
			applyInfo: {},
			applyInfoList: []
		}
	},
	mounted () {
		this.$nextTick(() => { 
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.formHeight = h -80;
		});
	},
	created () {
		this.getDetail()
	},
	methods: {
		/* 获取订单详情 */
		async getDetail() {
			const result = await mallOrderApi.orderReturnApplyDetail(this.$route.query.id);
			this.applyInfo = result.data;
			this.applyInfoList.push(result.data)
		}
	}
}	
</script>

<style lang="scss">
.order-delivery-container{
	.order-time-line{
		margin: 15px 0px;
	}
}	
</style>
